<template>
	<div style="width: 150%">
		<h3 class="pageTitle">教师信息表管理 </span></h3>
		<hr class="pageTitle" />
		<h4 class="pageTitle">筛选条件 <span class="label label-default">学院</span></h4>
		<div>
			<!-- 加粗 -->
			<b class="pageTitle">所属学院:</b>
			<select class="option">
				<option>全部</option>
				<option>计算机学院</option>
				<option>外国语学院</option>
			</select>
			<b class="pageTitle">性别:</b>
			<select class="option">
				<option>全部</option>
				<option>男</option>
				<option>女</option>
			</select>
			<b style="margin-left: 100px;">搜索:</b>
			<input type="text" class="search" placeholder="请输入教师工号,姓名">
			<button type="button" class="btn btn-default">筛选</button>
		</div>
		<hr class="pageTitle" />
		<button type="button" class="btn btn-default pageTitle courseinfo">导入教师信息</button>
		<span class="rightCondition">
			<img src="../../public/img/cloudup.png" />
			<img src="../../public/img/condition.png" style="width: 20px;height: 20px;" />
		</span>
		<br /><br />
		<table class="table table-condensed pageTitle">
			<thead>
				<tr>
					<th>序号</th>
					<th>教师工号</th>
					<th>教师姓名</th>
					<th>性别</th>
					<th>联系方式</th>
					<th v-if="region == '尚未登录!'"></th>
					<th v-else>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(it,index) in items" :key="it.id">
					<td>
						<label>
							<input type="checkbox" :value="index + 1">
							<span>{{index + 1}}</span>
						</label>
					</td>
					<td>{{it.id}}</td>
					<td>{{it.name}}</td>
					<td>{{it.gender}}</td>
					<td>{{it.phone}}</td>
					<td v-if="region == 'admin'">
						<button style="cursor: pointer;" @click="getValue(it.id)" data-toggle="modal"
							data-target="#myModal">预选</button>
					</td>
					<td v-if="region == 'teacher'">
						<a style="cursor: pointer;">查看</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="pageTitle">
			<label>
				<input type="checkbox">全选
				<a>批量删除</a>
			</label>
			<span class="page">
				共:<i>100</i>条
				<select class="option">
					<option>10条/页</option>
					<option>20条/页</option>
				</select>
				<ul class="pagination pagination-sm page">
					<li><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
				跳转到:<input type="text" style="width: 20px;" /> &nbsp;页 &nbsp;
				<input type="button" value="确定" />
			</span>
		</div>
		<!-- 模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">
							<b>请在下方填写新的课程信息</b>
						</h4>
					</div>
					<div class="modal-body">
						<table class="table">
							<caption>请选择教师课程</caption>
							<thead>
								<tr>
									<th>编号</th>
									<th>课程名称</th>
									<th>所属院系</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<template v-for="(lis,index) in list">
									<tr :class="(index + 1) % 2 == 0?'active':'success'">
										<td>{{index + 1}}</td>
										<td>{{lis.coursename}}</td>
										<td>{{lis.faculty}}</td>
										<td>
											<a style="cursor: pointer;" @click="selectCourse(lis.id)"
												data-dismiss="modal">选择</a>
										</td>
									</tr>
								</template>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">
							关闭
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	</div>
</template>

<script>
	//引入axios
	import axios from 'axios'
	export default {
		name: 'Home',
		data() {
			return {
				items: [''],
				region: '',
				list: [''],
				userid: ''
			}
		},
		methods: {
			getValue(m) {
				this.userid = m
			},
			selectCourse(x) {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/insertCourseByTe',
					//请求方式
					method: 'post',
					params: {
						userid: this.userid,
						courseid: x
					}
				}).then(
					res => {
						alert("预选成功")
					},
					err => {
						console.log(err.message)
					}
				)
			}
		},
		mounted() {
			axios({
					//请求地址
					url: 'http://localhost:8080/axios/queryCoursePage.do',
					//请求方式
					method: 'post',
				}).then(
					res => {
						//登录成功
						this.list = res.data.items.list
					},
					err => {
						console.log(err.message)
					}
				),
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/findTeacher',
					//请求方式
					method: 'post',
				}).then(
					res => {
						//登录成功
						this.items = res.data.resp
					},
					err => {
						console.log(err.message)
					}
				),
				//挂载完成查询身份
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/selectRegion.do',
					//请求方式
					method: 'post',
				}).then(
					res => {
						//请求成功
						this.region = res.data.region
					},
					err => {
						console.log(err.message)
					}
				)
		}
	}
</script>
